<%@include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<s:layout-render name="/WEB-INF/jsp/common/layout_main.jsp"
                 title="Group Dashboard">
    <s:layout-component name="body">
        <s:messages/>
        <script type="text/javascript">

            jQuery(document).ready(function() {
                jQuery('#mycarousel').jcarousel({
                    wrap: 'circular'
                });
            });
        </script>

        <div style="width: 1320px; height: 1020px;">
            <div id="divleft" style="height:100%; width: 320px;"> 
                <div id="divwelcome">
                    <span>&nbsp;Welcome!</span> <br/><br/>
                    <d:table name="${actionBean.context.currentUser}" id="user1">
                        <d:column>
                            <img align="left" border="0" src="${actionBean.context.currentUser.photo}" width="90px" height="100px" style="margin-left:10px; margin-right:10px;">
                        </d:column>
                        <d:column title=" " property="userName" style="color: #003C4C; font-size: 12pt; font-style: normal; font-weight: bold; font-family:Tahoma; "/>
                    </d:table>
                    <div style="border: 1px solid #cccccc; background-color:#f7f7f7; height: 40px;"> 
                        <s:link  target="_blank" class="exampledemowidget" style="color: #404040; font-size: 12px;" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="add">
                            <img alt="" style="margin-left: 10px;" border="0" src="images/add_blue.png" width="20px" height="20px"> Add New Widget
                        </s:link>
                        <script type="text/javascript">
                            $('.exampledemowidget').popupWindow({ 
                                height:540, 
                                width:970, 
                                top:50, 
                                left:50
                            }); 
                        </script>
                        <s:link target="_blank" class="exampledemo" style="color: #404040; font-size: 12px;" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="customize">
                            <img alt="" border="0" width="20px" height="20px" src="images/select_option.png" style="margin-left: 10px;"> Customize
                        </s:link>
                        <script type="text/javascript">
                            $('.exampledemo').popupWindow({ 
                                height:672, 
                                width:579, 
                                top:50, 
                                left:50
                            }); 
                        </script>
                    </div>
                    <br/>
                    <br/>

                </div>

                <br/>
                <!-- My Group List-->

                <div class="divborder1" style="width:280px;" align="center">
                    <div class="boxTitle1"><div class="boxTitle2">My Group List</div></div>
                    <div class="boxMiddle"><div style="margin-top:8px; margin-left:10px;">List of all my groups and Roles</div></div>
                    <div  id="wrapgroup"> 


                        <c:forEach var="myGroups" items="${actionBean.myGroups}" >
                            <c:forEach var="usr" items="${myGroups.users}">
                                <div class="boxtag" onmouseout="style.backgroundColor='white'" onmouseover="style.backgroundColor='#84C1DF'">
                                    <c:if test="${empty myGroups.logo}">
                                        <div><img class="boxtagImg"   alt="" align="left" border="0" width="51px" height="51px" src="images/advertising.jpg"></div>
                                        </c:if>
                                        <c:if test="${not empty myGroups.logo}">
                                        <div><img class="boxtagImg"   alt="" align="left" border="0" width="51px" height="51px" src="${myGroups.logo}"></div>
                                        </c:if>
                                        <s:link  class="boxtagTitle" style="text-decoration: none;" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="view">
                                            <s:param name="groupId" value="${myGroups.groupId}"/>
                                        <div class="boxtagTitle" align="left">${fn:substring(myGroups.name,0,30)}</div>
                                    </s:link>
                                    <div class="boxtagText">${usr.position}</div>

                                </div>
                            </c:forEach>
                        </c:forEach>
                    </div><!-- End wrap  -->
                    <div class="boxfooter" style="height:10px;"></div>
                </div>
                <!-- End My Group List-->
                <br/>
                <!-- Member List-->
                <div class="divborder1" style="width:280px;" align="center">
                    <div class="boxTitle1"><div class="boxTitle2">Member List</div></div>
                    <div class="boxMiddle"><div style="margin-top:8px; margin-left:10px;">List of all the members of my group</div></div>

                    <div  id="wrapgroup" style="height: 204px;">
                        <c:forEach var="member" items="${actionBean.groupMembers}">
                            <div class="boxtag" onmouseout="style.backgroundColor='white'" onmouseover="style.backgroundColor='#84C1DF'">
                                <div>
                                    <img class="boxtagImg"   alt="" align="left" border="0" src="${member.photo}" width="40px" height="44px">
                                </div>
                                <div class="boxtagTitle" align="left"> 
                                    <s:link target="_blank" class="example3demomem" style="text-decoration: none; color:#3960A0;" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="memberProfile">
                                        ${member.userName} 
                                        <s:param name="userId" value="${member.userId}"/>
                                        <s:param name="groupId" value="${member.groupId}"/>
                                    </s:link>
                                </div>
                                <div class="boxtagText"><span>${member.rol} - </span>
                                    <s:link target="_blank" class="example3demomsg" style="text-decoration: none; color:#999" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="send">
                                        <span>Send Message</span>
                                    </s:link>

                                </div>
                            </div>
                        </c:forEach>
                        <script type="text/javascript">
                            $('.example3demomem').popupWindow({ 
                                height:410, 
                                width:400, 
                                top:50, 
                                left:250
                            }); 
                            $('.example3demomsg').popupWindow({ 
                                /*centerScreen:1*/
                                height:300, 
                                width:390, 
                                top:50, 
                                left:250
                            }); 
                        </script>

                    </div><!-- End wrap  -->

                    <div class="boxfooter" style="height:10px;">
                    </div>
                </div>
                <!-- End Member List-->

                <br/>
            </div>
            <div id="divright" style="height:100%; width: auto; margin-left: 10px;">
                <br/>
                <span style="font-size:24px;">${actionBean.groupName} - Dashboard</span>
                <br/><br/>
                <div style="position:relative; float: left; width:600px;"><img alt="" border="0" src="images/searchbox.png" usemap="#searchbox" ><img alt="" style="margin-left: -6px; margin-top: -3px;" border="0" src="images/searchbox2.png">
                    <map name="searchbox" id="searchbox">
                        <area shape="rect" coords="3,57,586,79" href="ResourceDetail.action?resourceId=101" alt="Resource1" />
                        <area shape="rect" coords="3,80,586,98" href="ResourceDetail.action?resourceId=102" alt="Resource2" />
                        <area shape="rect" coords="5,99,586,119" href="ResourceDetail.action?resourceId=103" alt="Resource3" />
                        <area shape="rect" coords="5,119,586,139" href="ResourceDetail.action?resourceId=104" alt="Resource4" />
                        <area shape="rect" coords="4,139,586,158" href="ResourceDetail.action?resourceId=105" alt="Resource5" />
                        <area shape="rect" coords="4,158,586,178" href="ResourceDetail.action?resourceId=101" alt="Resource6" />
                        <area shape="rect" coords="4,179,587,199" href="ResourceDetail.action?resourceId=102" alt="Resource7" />
                        <area shape="rect" coords="3,199,587,219" href="ResourceDetail.action?resourceId=103" alt="Resource8" />
                        <area shape="rect" coords="2,219,587,239" href="ResourceDetail.action?resourceId=104" alt="Resource9" />
                        <area shape="rect" coords="3,239,587,259" href="ResourceDetail.action?resourceId=105" alt="Resource10" />
                    </map>
                </div>

                <!-- Notification List-->
                <div class="divborder1" style="width:330px; float: left;" align="center">
                    <div class="boxTitle1"><div class="boxTitle2">Notification List</div></div>
                    <div class="boxMiddle"><div style="margin-top:8px; margin-left:10px;">Notifications</div></div>
                    
                    <div  id="wrapgroup" style="height:234px;">
                       <c:forEach var="notification" items="${actionBean.notifications}" >
                            <div class="boxtag" style="height: 70px;" onmouseout="style.backgroundColor='white'" onmouseover="style.backgroundColor='#84C1DF'">
                                <div><img class="boxtagImg"   alt="" align="left" border="0" src="${notification.typeImageLocation}" width="40px" height="44px"></div>
                                <div class="boxtagTitle" align="left" style="font-size:10px; margin-top: 0px;">Notification </div>
                                <div class="boxtagText" style="width:250px;">
                                    <s:link target="_blank" class="example3demo" style="color: #404040; font-size: 10px; text-decoration:none;" beanclass="spatialmarketplace.cem.action.DashboardActionBean" event="notification">
                                        ${notification.actionLink}
                                        <s:param name="currentNotificationId" value="${notification.notificationId}"/>
                                    </s:link>
                                    <br/>
                                    <img alt="" border="0" src="images/calendar.png">&nbsp; <span style="font-size: 10px; color: #999;">${notification.date}</span></div>
                            </div>
                        </c:forEach>
                        <script type="text/javascript">
                            $('.example3demo').popupWindow({ 
                                /*centerScreen:1*/
                                height:300, 
                                width:390, 
                                top:50, 
                                left:250
                            }); 
                        </script>

                    </div><!-- End wrap  -->

                    <div class="boxfooter" style="height:10px;">
                    </div>
                </div>
                <!-- End Notification List-->


                <br/><br/>
                <div class="linediv" style="border:1px solid #999; width:945px; margin-top: 300px;"></div>
                <br/><br/>
                <div id="addash">
                    <%@ include file="advertising.jsp" %>
                </div>
                <div class="linediv" style="border:1px solid #999; margin-top: 20px;"></div>
                <!-- Forum -->
                <br/>
                <div style="border-bottom:1px solid #999; border-top:1px solid #999; width:645px;"><img border="0" alt="0" src="images/comment-img.png" width="30px" />&nbsp;<span style="color: #003C4C; font-size: 14pt; font-weight: bold;">&nbsp;Forum</span>
                </div>
                <br/>
                <iframe src="http://localhost:8080/SpatialMarketplace/Forum.action?groupOrResourceId=${actionBean.groupId}&belongsToGroup=true" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:643px; height: 330px" ></iframe>  
                <div class="linediv" style="border:1px solid #999; margin-top: 20px;"></div>
                <!-- End Forum -->


            </div>
        </div>  
    </s:layout-component>
</s:layout-render>